<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
//tabview
const tabHeaders = ref([
    { label: '概述', path: '/ehpcTabViews/ehpcOverView' },
    { label: '设置', path: '/ehpcTabViews/ehpcSettings' },
    { label: '许可证信息', path: '/ehpcTabViews/ehpcLicenseInfo' },
    { label: '版本信息', path: '/ehpcTabViews/ehpcVersionInfo' },
    { label: '运行命令', path: '/ehpcTabViews/ehpcRunCommand' },
    { label: '机架视图', path: '/ehpcTabViews/ehpcRackView' }
]);

const router = useRouter();
const handleTabChange = ({ index }) => {
    // console.log(tabHeaders.value[index]);
    router.push(tabHeaders.value[index].path);
};
</script>

<template>
    <!-- tab栏 -->
    <TabView v-model="tabHeaders" @tab-change="handleTabChange">
        <TabPanel v-for="t in tabHeaders" :key="t">
            <template #header>
                <div class="flex align-items-center gap-2">
                    <span>{{ t.label }}</span>
                </div>
            </template>
        </TabPanel>
    </TabView>

    <RouterView />
</template>
<style scoped lang="scss">
.p-tabview {
    :deep(.p-tabview-nav) {
        justify-content: space-evenly;
    }
}
</style>
